<template>
  <div :key="key">
    <el-row
      justify="space-around"
      align="middle"
      class="nav-info"
    >
      <el-col
        :span="6"
        class="back"
        @click="this.$router.push({ path: backPath })"
      >
        <el-text v-show="isBack">
          <el-icon style="color: #3271ae; margin-right: 5px;">
            <HomeFilled />
          </el-icon>
          返回首页
        </el-text>
      </el-col>
      <el-col :span="6">
        {{ address }}
      </el-col>
      <el-col :span="6">
        <span
          v-show="name === ''"
          style="cursor: pointer"
          @click="this.$router.push({ path: '/login' })"
        >
          未登录
        </span>
        <span
          v-show="name !== ''"
          style="cursor: pointer"
          @click="this.$router.push({ path: '/userInfo' })"
        >
          {{ name }}</span>
        <el-divider
          style="align-self: center; background-color: #cccccc"
          direction="vertical"
        />
        <span
          style="cursor: pointer;"
          @click="this.$router.push({ path: '/order' })"
        >我的订单</span></el-col>
    </el-row>
  </div>
</template>

<script>
import { useUserInfo } from "@/store/user";
const userInfoState = useUserInfo();

export default {
  props: {
    isBack: Boolean,
    backPath: {
      type: String,
      default: '/'
    },
  },
  data() {
    return {
      address: userInfoState.address,
      name: userInfoState.name,
      key: 0,
    };
  },
};
</script>

<style scoped>
.nav-info {
  color: #999999;
  text-align: center;
  line-height: 30px;
}

.back {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  width: 100px;
}
</style>